<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<style type="text/css">
    .box{width:610px;margin:100px auto;}
    .tb-pic a{display:table-cell;text-align:center;vertical-align:middle;}
    .tb-pic a img{vertical-align:middle;}
    .tb-pic a{*display:block;*font-family:Arial;*line-height:1;}
    .tb-thumb{margin:10px 0 0;overflow:hidden;}
    .tb-thumb li{background:none repeat scroll 0 0 transparent;float:left;height:42px;margin:0 6px 0 0;overflow:hidden;padding:1px;}
    .tb-s310, .tb-s310 a{height:310px;width:310px;}
    .tb-s310, .tb-s310 img{max-height:310px;max-width:310px;}
    .tb-s310 a{*font-size:271px;}
    .tb-s40 a{*font-size:35px;}
    .tb-s40, .tb-s40 a{height:40px;width:40px;}
    .tb-booth{border:1px solid #CDCDCD;position:relative;z-index:1;}
    .tb-thumb .tb-selected{background:none repeat scroll 0 0 #C30008;height:40px;padding:2px;}
    .tb-thumb .tb-selected div{background-color:#FFFFFF;border:medium none;}
    .tb-thumb li div{border:1px solid #CDCDCD;}
    .zoomDiv{z-index:999;position:absolute;top:0px;left:0px;width:200px;height:200px;background:#ffffff;border:1px solid #CCCCCC;display:none;text-align:center;overflow:hidden;}
    .zoomMask{position:absolute;cursor:move;z-index:1;}
    div.pict_1 {
        /*width: 30%;*/
        /*height: 100%;*/
    }
    div.pict_2 {
        /*width: 30%;*/
        /*height: 100%;*/
    }
    label.labvaue {
        /* height: 30px; */
        padding-left: 20px;
        font-size: 13px;
        /* width: 100%; */
    }
</style>
<body class="gray-bg">
<input type="hidden" id="pointId" th:value="*{pointId}"/>
<input type="hidden" id="taskId" th:value="*{taskId}"/>
<div class="row" id="row">
    <!--<label class="col-sm-3 control-label">标签_1：</label>
    <div id="lable_1">

    </div>
    <label class="col-sm-3 control-label">标签_2：</label>
    <div id="lable_2">

    </div>-->
</div>
<div th:include="include :: footer"></div>
<script th:src="@{/js/jquery.imagezoom.min.js}"></script>
<script type="text/javascript">
    $(function () {

        var pointId = $("#pointId").val();
        var taskId = $("#taskId").val();

        $.ajax({
            url: ctx + "assets/pTask/getssPicture",
            type: "post",
            dataType: "json",
            data: {"pointId":pointId,"taskId":taskId},
            success: function (result) {

                console.log("length=="+result.length)

                for (var i=0;i<result.length;i++) {
//                    var row = null;
//                    var div = null;
                    /*if(result[i].type=="lable1"){
                        row = document.getElementById("lable_1");
                        div = document.createElement("div");
                        div.setAttribute('class', 'col-sm-12 col-md-11 pict_1');
                    }else if(result[i].type=="lable2"){
                        row = document.getElementById("lable_2");
                        div = document.createElement("div");
                        div.setAttribute('class', 'col-sm-12 col-md-11 pict_2');
                    }*/

                    var row = document.getElementById("row");
                    var label = document.createElement("label");
                    label.setAttribute("class","labvaue");
                    label.innerText=result[i].type;
                    var div = document.createElement("div");
                    div.setAttribute('class', 'col-sm-12 col-md-11 pict_2');
                    var a = document.createElement("a");
                    a.setAttribute('class', 'thumbnail');
                    var img = document.createElement("img");
                    img.setAttribute('src', ctx + 'photo/show?address=' + result[i].address);
                    img.setAttribute('rel', ctx + 'photo/show?address=' + result[i].address)
                    img.setAttribute('class', 'jqzoom')
                    a.appendChild(img);
                    div.appendChild(a);
                    row.appendChild(label);
                    row.appendChild(div);
                }
//                $(".jqzoom").imagezoom();
            }
        });

    });
</script>
</body>
</html>